<template>
  <div class="app-container" style="background: #02182f; height: 190vh">


<!--    <el-button type="primary" size="small" @click="exportPdf('#content','pdf文件')" >导出pdf</el-button>-->

    <div id="content" class="app-container" style="background: #02182f; height: 190vh">

      <div style="color: #8ad4f4; font-size: 30px; display: flex; justify-content: center; align-items: center;">高速公路气象的专用预报分析</div>

      <div style="display: flex; justify-content: center; align-items: center; margin-top: 30px">
        <div style="position: relative; display: flex;">
          <svg-icon icon-class="u566" class-name='u566'/>
          <div style="position: absolute; color: #ffffff; margin-top: 15px; margin-left: 105px; font-size: 20px">雅西高速——未来24小时交通气象</div>
        </div>
      </div>

      <div class="currency">
        <div style="width: 98%; height: 5px; background-color: #026996"></div>
      </div>




      <div class="prediction-title">
        <div style="background-color: #00bfbf; width: 15px; height: 50px"></div>
        <div style="background: linear-gradient(to right, #015967, #02182f); width: 300px; height: 50px">
          <div style="margin-top: 13px; margin-left: 20px; color: #99e2e2; font-size: 18px">
            24小时气象概要
          </div>
        </div>
      </div>


      <div class="currency">

        <div style="display: flex; background-color: #0f3a4a; width: 98%; height: 100px; margin-top: 20px;">
          <div>
            <div style="margin-top: 25px;margin-left: 10px; color: #ffffff">
              {{ comment1 }}
            </div>

            <div style="margin-top: 10px;margin-left: 10px; color: #ffffff">
              {{ comment2 }}
            </div>
          </div>
        </div>

      </div>



      <div class="prediction-title">
        <div style="background-color: #00bfbf; width: 15px; height: 50px"></div>
        <div style="background: linear-gradient(to right, #015967, #02182f); width: 300px; height: 50px">
          <div style="margin-top: 13px; margin-left: 20px; color: #99e2e2; font-size: 18px">
            交通气象精细化预报
          </div>
        </div>
      </div>

      <div class="currency">

        <div style="display:flex; background-color: #0f3a4a; width: 98%; height: 605px; margin-top: 30px;">

          <div style="width: 100%;  position: relative;">
            <div style="color: #ffffff; margin-left: 3%;margin-top: 3%">
              {{ weatherExplain1 }}
            </div>

            <div style="width: 96.5%; position: absolute; left: 50%; transform: translateX(-50%);margin-top: 10px">
              <!-- 转化后 -->
              <el-table border  :data="transData" >
                <el-table-column v-for="(item, index) in transTitle" :label="item" :key="index" align="center"
                                 :width="getColumnWidth(index)">
                  <template slot-scope="scope">
                    <div :style="getCellBackground(scope.row, index)" >{{ scope.row[index] }}</div>
                  </template>
                </el-table-column>
              </el-table>

            </div>


            <div style="color: #ffffff; margin-left: 3%;margin-top: 15%">
              {{ weatherExplain2 }}
            </div>

            <div style="width: 96.5%; position: absolute; left: 50%; transform: translateX(-50%);margin-top: 10px">
              <!-- 转化后 -->
              <el-table border :data="transData2" >
                <el-table-column v-for="(item, index) in transTitle2" :label="item" :key="index" align="center"
                                 :width="getColumnWidth(index)">
                  <template slot-scope="scope">
                    <div :style="getCellBackground(scope.row, index)" >{{ scope.row[index] }}</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>

          </div>







        </div>


      </div>





      <div style="display: flex; justify-content: center; align-items: center; margin-top: 30px">
        <div style="position: relative; display: flex;">
          <svg-icon icon-class="u566" class-name='u566'/>
          <div style="position: absolute; color: #ffffff; margin-top: 15px; margin-left: 105px; font-size: 20px">雅西高速——未来3天气象趋势</div>
        </div>
      </div>


      <div class="currency">
        <div style="width: 182vh; height: 5px; background-color: #026996"></div>
      </div>



      <div class="currency">
        <div style="display: flex;background-color: #0f3a4a; width: 98%; height: 100px; margin-top: 20px;">

          <div>
            <div style="margin-top: 25px;margin-left: 10px; color: #ffffff">
              {{ predictionComment1 }}
            </div>

            <div style="margin-top: 10px;margin-left: 10px; color: #ffffff">
              {{ predictionComment2 }}
            </div>
          </div>
        </div>
      </div>



      <div class="prediction-title" style="margin-top: 50px">
        <div style="background-color: #00bfbf; width: 15px; height: 50px"></div>
        <div style="background: linear-gradient(to right, #015967, #02182f); width: 300px; height: 50px">
          <div style="margin-top: 13px; margin-left: 20px; color: #99e2e2; font-size: 18px">
            分级说明规则
          </div>
        </div>
      </div>


      <div style="display: flex">

        <div style="display: flex">

          <div style=" margin-left: 100px; margin-top: 100px">

            <div style="background-color: #d9001b; width: 50px;height: 18px; margin-top: 50px"></div>
            <div style="background-color: #f59a23; width: 50px;height: 18px; margin-top: 21px"></div>
            <div style="background-color: #ffff00; width: 50px;height: 18px; margin-top: 20px"></div>
            <div style="background-color: #027db4; width: 50px;height: 18px; margin-top: 20px"></div>

          </div>



          <div style="margin-top: 100px; margin-left: 5px">
            <div style="display: flex;">
              <div class="table-rule">预测等级</div>
              <div class="table-rule">说明</div>
              <div class="table-rule">未来24小时总降雨量(mm)</div>
              <div class="table-rule">单位小时强度</div>
              <div class="table-rule">影响程度</div>
            </div>

            <div style="display: flex;">
              <div style="display: flex;">
                <div class="table-rule">一级</div>
                <div class="table-rule">大暴雨及以上</div>
                <div class="table-rule">≥100mm</div>
                <div class="table-rule">≥50mm</div>
                <div class="table-rule">有严重影响</div>
              </div>
            </div>

            <div style="display: flex;">
              <div class="table-rule">二级</div>
              <div class="table-rule">暴雨</div>
              <div class="table-rule">30~50mm</div>
              <div class="table-rule">50~100mm</div>
              <div class="table-rule">有较大影响</div>
            </div>

            <div style="display: flex;">
              <div class="table-rule">三级</div>
              <div class="table-rule">大雨</div>
              <div class="table-rule">25~50mm</div>
              <div class="table-rule">15~30mm</div>
              <div class="table-rule">有一定影响</div>
            </div>

            <div style="display: flex;">
              <div class="table-rule">四级</div>
              <div class="table-rule">小中雨</div>
              <div class="table-rule">0~25mm</div>
              <div class="table-rule">0~15mm</div>
              <div class="table-rule">稍有影响</div>
            </div>

          </div>



        </div>


        <div style="display: flex">

          <div style=" margin-left: 50%; margin-top: 100px">

<!--            <div style="background-color: #d9001b; width: 50px;height: 18px; margin-top: 50px"></div>-->
<!--            <div style="background-color: #f59a23; width: 50px;height: 18px; margin-top: 21px"></div>-->
<!--            <div style="background-color: #ffff00; width: 50px;height: 18px; margin-top: 20px"></div>-->
<!--            <div style="background-color: #027db4; width: 50px;height: 18px; margin-top: 20px"></div>-->

          </div>



          <div style="margin-top: 100px; margin-left: 5px">
            <div style="display: flex;">
              <div class="table-rule">预测等级</div>
              <div class="table-rule">说明</div>
              <div class="table-rule">未来24小时总降雨量(mm)</div>
              <div class="table-rule">未来3天任意一天总降雨量(mm)</div>
              <div class="table-rule">过去14天累计降雨量(mm)</div>
            </div>

            <div style="display: flex;">
              <div style="display: flex;">
                <div class="table-rule">一级</div>
                <div class="table-rule">连续降雨</div>
                <div class="table-rule">≥10mm</div>
                <div class="table-rule">≥25mm</div>
                <div class="table-rule">≥115mm</div>
              </div>
            </div>

            <div style="display: flex;">
              <div class="table-rule"></div>
              <div class="table-rule"></div>
              <div class="table-rule"></div>
              <div class="table-rule"></div>
              <div class="table-rule"></div>
            </div>

            <div style="display: flex;">
              <div class="table-rule"></div>
              <div class="table-rule"></div>
              <div class="table-rule"></div>
              <div class="table-rule"></div>
              <div class="table-rule"></div>
            </div>

            <div style="display: flex;">
              <div class="table-rule"></div>
              <div class="table-rule"></div>
              <div class="table-rule"></div>
              <div class="table-rule"></div>
              <div class="table-rule"></div>
            </div>
          </div>



        </div>


      </div>

    </div>

















  </div>
</template>
<script>
import { predictionInfo } from "@/api/snowRemoving/prediction";
export default {
  data() {
    return {


      road:'',

      comment1:'',
      comment2:'',

      weatherExplain1:'',
      weatherExplain2:'',

      predictionComment1:'',
      predictionComment2:'',


      // originData 为后端原始正常的数据, 此数据按正常表格展示 一行一行的数据
      // 保证数组里每一个对象中的字段顺序, 从上到下 一次对应显示表格中的从左到右
      originData: [],
      originTitle: [], // originTitle 该标题为 正常显示的标题, 数组中的顺序就是上面数据源对象中的字段标题对应的顺序
      transTitle: [], // transTitle 该标题为转化后的标题, 注意多一列,  因为原来的标题变成了竖着显示了, 所以多一列标题, 第一个为空即可
      transData: [],

      originData2: [],
      originTitle2: [], // originTitle 该标题为 正常显示的标题, 数组中的顺序就是上面数据源对象中的字段标题对应的顺序
      transTitle2: [], // transTitle 该标题为转化后的标题, 注意多一列,  因为原来的标题变成了竖着显示了, 所以多一列标题, 第一个为空即可
      transData2: [],



      columnWidths: {
        0: '110px', // 第一列的宽度为100px
      },
    }
  },
  created() {


    this.getInfo();
  },


  methods:{




    getInfo(){

      this.road = "YAXI"
      predictionInfo(this.road).then(response =>{

        console.log(response.data.predictionVo[0])
        const predictionVo1  = response.data.predictionVo[0]
        this.comment1 = predictionVo1.comment
        this.weatherExplain1 = predictionVo1.predictionTable.weatherExplain
        this.predictionComment1 = predictionVo1.predictionComment

        this.transTitle = predictionVo1.predictionTable.transTitle
        this.originTitle = predictionVo1.predictionTable.originTitle
        this.originData = predictionVo1.predictionTable.originData
        this.transData = this.matrixTranspose(this.originTitle,this.originData);



        const predictionVo2  = response.data.predictionVo[1]
        this.comment2 = predictionVo2.comment
        this.weatherExplain2 = predictionVo2.predictionTable.weatherExplain
        this.predictionComment2 = predictionVo2.predictionComment

        this.transTitle2 = predictionVo2.predictionTable.transTitle
        this.originTitle2 = predictionVo2.predictionTable.originTitle
        this.originData2 = predictionVo2.predictionTable.originData
        this.transData2 = this.matrixTranspose(this.originTitle2,this.originData2);


      })
    },





    matrixTranspose(originTitle,originData){

      // 数组按矩阵思路, 变成转置矩阵
      let matrixData = originData.map((row) => {
        let arr = []
        for (let key in row) {
          arr.push(row[key])
        }
        return arr
      })

      // 加入标题拼接最终的数据
      let transData = matrixData[0].map((col, i) => {
        return [originTitle[i], ...matrixData.map((row) => {
          return row[i]
        })]
      })

      return transData

    },




    getColumnWidth(index) {
      // 通过方法动态获取每一列的宽度
      return this.columnWidths[index] || '60px'; // 默认宽度为70px
    },



    getCellBackground(row, index) {

      // if (index !== 0){
      //
      //   if (row[index] === '0.8'){
      //
      //     return { background: 'red',position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center'};
      //   }
      // }else {
      //
      //
      //
      //   return { fontWeight: 'bold' };
      //
      //
      // }

    },


    //
    // if (row[index] === 0.2) {
    //
    // }

    // if (row[column.property] === '某个条件') {
    //   return { background: 'red' }; // 设置背景颜色为红色
    // }
    // // 可以根据其他条件设置不同的背景颜色

    // PDF















  }

}
</script>

<style scoped  lang="scss">



.currency{
  width: 100%;
  display: flex;
  justify-content: center;
}




.u566{
  width: 500px;
  height: 57px;
  display: flex;
}

.prediction-title{

  margin-top: 40px;
  margin-left: 20px;
  display: flex;
}

.table-rule{

  width: 110px;
  height: 38px;
  background-color: #015478;
  border: 1px solid #797979;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  font-size: 14px;
}




</style>
